<template>
<block>
	<uni-search-bar placeholder="请输入商品名称/订单号/收货人姓名/手机号" @confirm="confirm" v-model="searchValue"
	 cancelButton='none' @clear="clear" class="search-bar">
	</uni-search-bar>
	<scroll-view scroll-x class="bg-white nav fixed" style="top: 45px;">
	  <view class="flex text-center">
		<view :class="'cu-item flex-sub '+(index==tabCur?'text-blue cur':'')" 			@tap="tabSelect" :data-index="index" :data-key="item.key" v-for="(item,index) in (orderStatus)" :key="index">
		  {{item.value}}
		</view>
	  </view>
	</scroll-view>
	<view class="margin-top-bar">
	  <view class="cu-card article">
		<view class="cu-item" v-for="(item,index) in (orderList)" :key="index">
			<navigator hover-class="none" :url="'/pages/order/order-detail/index?id='+(item.id)">
				<view class="cu-bar bg-white">
				  <view class="action">
					<text class="cuIcon-titles text-black"></text> {{ item.createTime }}
				  </view>
				  <view class="action text-red">
					{{item.statusDesc}}
				  </view>
				</view>
				<view class="cu-item padding-bottom" v-for="(item2,index2) in (item.listOrderItem)" :key="index2">
					<view class="content">
						<image :src="item2.picUrl ? item2.picUrl : '/public/img/no_pic.png'" mode="aspectFill" class="row-img margin-top-xs"></image>
						<view class="desc row-info margin-top-sm">
						  <view class="text-black margin-top-sm overflow-2">{{item2.spuName}}</view>
						  <view class="text-gray text-sm margin-top-sm overflow-2" v-if="item2.specInfo">{{item2.specInfo}}</view>
						  <view class="flex justify-between">
							<view class="text-price text-bold text-xl text-blue margin-top-sm">{{item2.paymentPrice}}</view>
							<view class="text-black text-sm margin-top-sm padding-lr-sm">x{{item2.quantity}}</view>
						  </view>
						</view>
					</view>
					<view class="cu-item text-right padding-sm" catchtap v-if="item2.status != '0'&&item2.statusDesc">
					<navigator class="cu-btn line sm text-orange" 						:url="'/pages/order/order-refunds/form/index?orderItemId='+(item2.id)">
						{{item2.statusDesc}}
					</navigator>
				  </view>
				</view>
			</navigator>
			<order-operate class="response" 				:orderInfo="item" @orderCancel="orderCancel" 
				@orderReceive="orderCancel" @orderDel="orderDel" 
				@unifiedOrder="unifiedOrder" :data-index="index"/>
		</view>
	  </view>
	  <view :class="'cu-load bg-gray '+(loadmore?'loading':'over')"></view>
	</view>
</block>
</template>

<script>
import orderOperate from "@/components/order-operate/index";
const util = require('../../../utils/util.js');

const app = getApp();
export default {
	components: {
	  orderOperate
	},
	data() {
        return {
		  tabCur: 0,
		  orderStatus: [{
			value: '全部订单',
			key: ''
		  }, {
			value: '待付款',
			key: '0'
		  }, {
			value: '待发货',
			key: '1'
		  }, {
			value: '待收货',
			key: '2'
		  }, {
			value: '已完成',
			key: '4'
		  }],
		  page: {
			searchCount: false,
			current: 1,
			size: 10,
			ascs: '',
			//升序字段
			descs: 'create_time'
		  },
		  parameter: {
			status: ""
		  },
		  loadmore: true,
		  orderList: []
		};
    }, 
	onShow() {}, 
	onLoad: function (options) {
	  let that = this;

	  if (options.status) {
		this.setData({
		  ["parameter.status"]: options.status
		});
		this.orderStatus.forEach(function (status, index) {
		  if (status.key == options.status) {
			that.setData({
			  tabCur: index
			});
		  }
		});
	  }

	  app.globalData.initPage().then(res => {
		this.orderPage();
	  });
	}, 
	onReachBottom() {
	  if (this.loadmore) {
		this.setData({
		  ["page.current"]: this.page.current + 1
		});
		this.orderPage();
	  }
	}, 
	onPullDownRefresh() {
	  // 显示顶部刷新图标
	  uni.showNavigationBarLoading();
	  this.refresh(); // 隐藏导航栏加载框

	  uni.hideNavigationBarLoading(); // 停止下拉动作

	  uni.stopPullDownRefresh();
	}, 
	methods: {
		orderPage() {
		  app.globalData.api.orderPage(Object.assign({}, this.page, util.filterForm(this.parameter))).then(res => {
			let orderList = res.data.records;
			this.setData({
			  orderList: [...this.orderList, ...orderList]
			});

			if (orderList.length < this.page.size) {
			  this.setData({
				loadmore: false
			  });
			}
		  });
		},

		refresh() {
		  this.setData({
			loadmore: true,
			orderList: [],
			["page.current"]: 1
		  });
		  this.orderPage();
		},

		tabSelect(e) {
		  let dataset = e.currentTarget.dataset;

		  if (dataset.index != this.tabCur) {
			this.setData({
			  tabCur: dataset.index,
			  ["parameter.status"]: dataset.key
			});
			this.refresh();
		  }
		},

		orderCancel(e) {
		  let index = e.target.dataset.index;
		  let orderList = this.orderList;
		  app.globalData.api.orderGet(orderList[index].id).then(res => {
			this.orderList[index] = res.data;
			this.setData({
			  orderList: this.orderList
			});
		  });
		},

		orderDel(e) {
		  let index = e.target.dataset.index;
		  this.orderList.splice(index, 1);
		  this.setData({
			orderList: this.orderList
		  });
		},

		unifiedOrder(e) {
		  let index = e.target.dataset.index;
		  let orderList = this.orderList;
		  app.globalData.api.orderGet(orderList[index].id).then(res => {
			this.orderList[index] = res.data;
			this.setData({
			  orderList: this.orderList
			});
		  });
		}
	}
};
</script>
<style >
	.row-img{
	  height: 240rpx!important;
	  border-radius: 10rpx
	}
	.row-info{
	  display: block!important;
	}
</style>